<template>
  <div class="component">
    <div class="container-center">
      <div class="over-hidden">
        <router-link
          class="btn btn-default pull-right icon icon-arrowsleftline mt-lg"
          :to="getMicroRoute('/tools')"
        >
          返回列表</router-link>
        <h2 class="text-left">字符替换</h2>
      </div>
      <div class="row">
        <div class="col-xs-6 row-cell">
          <div class="form-group">
            <label class="form-label">输入文本：</label>
            <div class="form-field">
              <textarea class="form-textarea json-input" rows="4" v-model="inputData"></textarea>
            </div>
          </div>
        </div>
        <div class="col-xs-6 row-cell">
          <div class="form-group">
            <label class="form-label">输出文本：</label>
            <div class="form-field">
              <textarea class="form-textarea json-input" rows="4" v-model="outputData"></textarea>
            </div>
          </div>
        </div>
        <div class="row-cell clear pt-sm mb-sm">
          <div class="pull-left col-7">
            <div>
              <a class="btn btn-default mr-md" @click="replaceWrap">清除换行</a>
              <a class="btn btn-default mr-md" @click="replaceSpace">清除空格</a>
              <a class="btn btn-default mr-md" @click="replaceLabelSpace">清除标签之间空格</a>
              <a class="btn btn-default mr-md" @click="replaceSingle">单引号转义</a>
              <a class="btn btn-default mr-md" @click="replaceDouble">双引号转义</a>
              <a class="btn btn-default mr-md" @click="replaceLeft">左斜杠转义</a>
              <a class="btn btn-default mr-md" @click="replaceRight">右斜杠转义</a>
              <a class="btn btn-default mr-md" @click="replaceDoubleToSingle">双引号替换为单引号</a>
              <a class="btn btn-default" @click="replaceSingleToDouble">单引号替换为双引号</a>
            </div>
            <div class="form-inline">
              <div class="form-group mr-md">
                <label class="form-label">匹配字符</label>
                <input class="form-input" v-model="matchStr" placeholder="正则或字符" />
              </div>
              <div class="form-group mr-md">
                <label class="form-label">替换字符</label>
                <input class="form-input" v-model="replaceStr" />
              </div>
              <div class="form-group">
                <button class="btn btn-default" type="button" @click="replaceReg">替换</button>
              </div>
            </div>
          </div>
          <div class="pull-right">
            <span class="form-inline">
              <SwitchRich v-model="isPipe" label="覆盖输入" />
            </span>
            <Pipe name="replace" :operation="{inputData: outputData}" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SwitchRich from '@/components/vue/components/switch-rich/2.0/switch-rich.vue'
import Pipe from '../index/pipe.vue'

/* 字符替换 */
export default {
  components: {
    SwitchRich,
    Pipe
  },

  data () {
    return {
      inputData: '',
      outputData: '',
      isPipe: false,
      matchStr: '',
      replaceStr: ''
    }
  },

  methods: {
    /**
     * @function 清除换行
    */
    replaceWrap () {
      this.outputData = String(this.inputData).replace(/\n|\r|\f/g, '')
      // 是否管道操作
      if (this.isPipe === true) {
        this.inputData = this.outputData
      }
    },

    /**
     * @function 清除空格
    */
    replaceSpace () {
      this.outputData = String(this.inputData).replace(/\s/g, '')
      // 是否管道操作
      if (this.isPipe === true) {
        this.inputData = this.outputData
      }
    },

    /**
     * @function 清除标签之间空格
    */
    replaceLabelSpace () {
      this.outputData = String(this.inputData).replace(/>\s+</g, '><')
      // 是否管道操作
      if (this.isPipe === true) {
        this.inputData = this.outputData
      }
    },

    /**
     * @function 单引号转义
    */
    replaceSingle () {
      this.outputData = String(this.inputData).replace(/'/g, "\\'")
      // 是否管道操作
      if (this.isPipe === true) {
        this.inputData = this.outputData
      }
    },

    /**
     * @function 双引号转义
    */
    replaceDouble () {
      this.outputData = String(this.inputData).replace(/"/g, '\\"')
      // 是否管道操作
      if (this.isPipe === true) {
        this.inputData = this.outputData
      }
    },

    /**
     * @function 左斜杠转义
    */
    replaceLeft () {
      this.outputData = String(this.inputData).replace(/\//g, '\\/')
      // 是否管道操作
      if (this.isPipe === true) {
        this.inputData = this.outputData
      }
    },

    /**
     * @function 右斜杠转义
    */
    replaceRight () {
      this.outputData = String(this.inputData).replace(/\\/g, '\\\\')
      // 是否管道操作
      if (this.isPipe === true) {
        this.inputData = this.outputData
      }
    },

    /**
     * @function 单引号替换为双引号
    */
    replaceSingleToDouble () {
      this.outputData = String(this.inputData).replace(/'/g, '"')
      // 是否管道操作
      if (this.isPipe === true) {
        this.inputData = this.outputData
      }
    },

    /**
     * @function 双引号替换为单引号
    */
    replaceDoubleToSingle () {
      this.outputData = String(this.inputData).replace(/"/g, "'")
      // 是否管道操作
      if (this.isPipe === true) {
        this.inputData = this.outputData
      }
    },

    /**
     * @function 正则替换
    */
    replaceReg () {
      // 未匹配
      if (!this.matchStr) {
        return false
      }
      // 正则匹配
      let regArr = /\/(.+)\/(.*)/.exec(this.matchStr)
      if (!regArr) {
        regArr = ['', this.matchStr, 'g']
      }
      // 全部替换
      if (!/g/.test(regArr[2])) {
        regArr[2] = regArr[2] + 'g'
      }
      let matchReg = new RegExp(regArr[1], regArr[2])
      this.outputData = String(this.inputData).replace(matchReg, this.replaceStr)
      // 是否管道操作
      if (this.isPipe === true) {
        this.inputData = this.outputData
      }
    }
  },

  mounted () {
    // 管道数据
    if (this.$store.state.inputData) {
      this.inputData = this.$store.state.inputData
      this.$store.state.inputData = ''
    }
  }
}
</script>

<style lang="less">
.json-input{
  height: 450px;
}
</style>
